<template>
  <div>
    <!-- 一张图片 -->
    <a-row v-if="imgNumber === 'one'">
      <a-upload
        list-type="picture-card"
        :multiple="false"
        :fileList="imgFileList"
        :before-upload="spotImgUrlBeforeUpload"
        :customRequest="handleChangeHome"
        :remove="handlelogoRemove"
        @preview="handlePreview"
      >
        <div v-if="imgFileList.length < 1">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            {{ tip }}
          </div>
        </div>
      </a-upload>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </a-row>
    <!-- 多张图片 -->
    <a-row v-if="imgNumber === 'more'">
      <a-upload
        list-type="picture-card"
        :multiple="true"
        :fileList="imgMoreFileList"
        :before-upload="spotImgUrlBeforeUpload"
        :customRequest="handleChangeHome"
        :remove="handlelogoRemove"
        @preview="handlePreview"
      >
        <div v-if="imgMoreFileList.length < maxlengthImg">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            {{ tip }}
          </div>
        </div>
      </a-upload>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </a-row>
    <!-- 多张图片拖拽 -->
    <a-row v-if="imgNumber === 'drag'">
      <div class="ant-upload-list ant-upload-list-picture">
        <draggable
          class="syllable_ul"
          element="ul"
          :list="imgdragFileList"
          :options="{ group: 'title', animation: 150 }"
          :no-transition-on-drag="true"
          @change="change"
        >
          <transition-group
            type="transition"
            :name="!drag ? 'syll_li' : null"
            :css="true"
          >
            <div
              class="ant-upload-list-item ant-upload-list-item-done"
              v-for="item in imgdragFileList"
              :key="item"
            >
              <div class="ant-upload-list-item-info">
                <img :src="item.url" class="upimg" />
              </div>
              <a-icon type="close" @click="removeCoupon(item.uid)" />
            </div>
          </transition-group>
        </draggable>
      </div>
      <a-upload
        list-type="picture-card"
        class="upload-list-inline"
        :multiple="true"
        :fileList="[]"
        :before-upload="spotImgUrlBeforeUpload"
        :customRequest="handleChangeHome"
        :remove="removeCoupon"
      >
        <div class="">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            {{ tip }}
          </div>
        </div>
      </a-upload>
    </a-row>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
import draggable from "vuedraggable";
export default {
  props: {
    imgNumber: {
      type: String
    },
    tip: {
      type: String
    },
    multiple: {
      type: Number,
      default: 1
    },
    maxlengthImg: {
      type: Number
    },
    imgFileList: {
      type: Array
    },
    imgMoreFileList: {
      type: Array
    },
    imgdragFileList: {
      type: Array
    }
  },
  data() {
    return {
      previewVisible: false, //预览图片
      previewImage: "",
      drag: false
    };
  },
  components: {
    draggable
  },
  methods: {
    // 验证图片格式和大小
    spotImgUrlBeforeUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      if (!isJPG) {
        this.$message.error("请上传正确的图片格式");
        return false;
      }
      if (file.size >= 2 * 1024 * 1024) {
        this.$message.error("图片的大小不超过2M");
        return false;
      }
      return true;
    },
    // 预览图片
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    // 上传图片
    handleChangeHome(e) {
      if (this.imgNumber === "one") {
        this.$emit("UploadOne", e);
      } else if (this.imgNumber === "more") {
        this.$emit("UploadMore", e);
      } else if (this.imgNumber === "drag") {
        this.$emit("UploadDragImg", e);
      }
    },
    // 移除图片
    handlelogoRemove(file) {
      if (this.imgNumber === "one") {
        const index = this.imgFileList.indexOf(file);
        const newFileList = this.imgFileList.slice();
        newFileList.splice(index, 1);
        this.$emit("RemoveImg", newFileList);
      } else {
        const index = this.imgMoreFileList.indexOf(file);
        const newFileList = this.imgMoreFileList.slice();
        newFileList.splice(index, 1);
        this.$emit("RemoveMoreImg", newFileList);
      }
    },
    // 拖拽校验图片
    change() {
      this.$emit("validateImg", this.imgdragFileList);
    },
    // 拖拽移除图片
    removeCoupon: function(file) {
      this.imgdragFileList.forEach((val, key) => {
        if (file === val.uid) {
          this.imgdragFileList.splice(key, 1);
        }
      });
      this.$emit("validateImg", this.imgdragFileList);
    }
  }
};
</script>

<style scoped>
.uploadImg >>> .ant-upload {
  width: 104px;
  height: 104px;
  margin: 0;
  padding: 0;
}
.uploadImg >>> .ant-upload .ant-upload-text {
  font-size: 12px;
}
.uploadImg >>> .ant-upload .ant-upload-textimg {
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
}
/* 拖拽样式 */
ul {
  padding: 0;
}
.syllable_ul span {
  display: flex;
  flex-wrap: wrap;
}
.upimg {
  width: 86px;
  height: 86px;
}
.ant-upload-list-item {
  width: 104px;
  height: 104px;
  margin-right: 20px;
}
.ant-upload-list {
  display: block !important;
}
</style>
